<template>
    <div class="waiting-container">
        <OverlayStream
            :username="username"
            :avatar="avatar"
            :bg-image="avatar"
            :show-avatar="!TUIGlobal.isPC"
            :show-loading="false"
            bg-color="#22262ed9"
            :show-mask="showMask"
            :show-background-image="showBackgroundImage"
            :tip="tip"
        >
            <div v-if="!TUIGlobal.isPC && isGroupCall" class="groupcall-info">
                <div class="tip">
                    <TKText color="#FFF"
                        >{{ remoteUserListExcludeVolume.length
                        }}{{ t('people in the call') }}</TKText
                    >
                </div>
                <div class="avatar-group">
                    <div v-for="item in remoteUserListExcludeVolume" class="avatar-item">
                        <Avatar size="100%" :src="item.avatar || defaultAvatarSrc" />
                    </div>
                </div>
            </div>
        </OverlayStream>
    </div>
</template>

<script lang="ts" setup>
import { toRefs, computed } from '../../../../adapter-vue'
import { TUIGlobal, t } from '../../../../TUICallService'
import OverlayStream from '../../common/OverlayStream/OverlayStream.vue'
import Avatar from '../../base/Avatar/Avatar.vue'
import TKText from '../../base/TKText/TKText.vue'
import {
    useCallInfoContext,
    useCallerUserInfoContext,
    useUserInfoExcludeVolumeContext
} from '../../../hooks'
const defaultAvatarSrc =
    'https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/common/defaultAvatar.svg'

const { localUserInfoExcludeVolume, remoteUserListExcludeVolume } = toRefs(
    useUserInfoExcludeVolumeContext()
)
const { callerUserInfo } = toRefs(useCallerUserInfoContext())
const { isGroupCall } = toRefs(useCallInfoContext())

const username = computed(() =>
    !isGroupCall.value
        ? remoteUserListExcludeVolume.value?.[0]?.displayUserInfo
        : callerUserInfo.value.userId
)
const avatar = computed(() =>
    !isGroupCall.value
        ? remoteUserListExcludeVolume.value?.[0]?.avatar
        : callerUserInfo.value.avatar
)
const showMask = computed(() =>
    isGroupCall.value ? true : !localUserInfoExcludeVolume.value.isVideoAvailable
)
const showBackgroundImage = computed(() =>
    isGroupCall.value ? true : !localUserInfoExcludeVolume.value.isVideoAvailable
)
const tip = computed(() => (isGroupCall.value ? t('Invited group call') : null))
</script>

<style lang="scss" scoped>
.waiting-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}
.groupcall-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    z-index: 1;
    color: #fff;
    width: 100%;

    .avatar-group {
        display: flex;
        flex-wrap: wrap;
        margin-top: 12px;
        align-items: center;
        justify-content: center;
        max-width: 70%;

        .avatar-item {
            width: 10vw;
            height: 10vw;
            margin-left: 10px;
            margin-top: 10px;
        }
    }
}
</style>
